<template>
  <div>
    <el-dialog v-dialogDrag title="新增权限" :visible.sync="dialogFormVisible" width="30%" @close="closereg">
      <el-form ref="permissionsadd" :model="permissionsadd" :rules="rules" label-width="25%">
        <el-form-item label="权限编码" prop="permissionscode">
          <el-input v-model="permissionsadd.permissionscode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限名" prop="permissionsname">
          <el-input v-model="permissionsadd.permissionsname" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="permissionsadd.description" />
        </el-form-item>
        <el-form-item label="排序号" prop="sort">
          <el-input v-model="permissionsadd.sort" type="number" />
        </el-form-item>
        <el-form-item label="Icon" prop="icon">
          <icon-picker v-model="permissionsadd.icon" />
        </el-form-item>

        <el-form-item label="组件路径" prop="component">
          <el-input v-model="permissionsadd.component" />
        </el-form-item>
        <el-form-item label="上级" prop="parentid">
          <treeselect v-model="permissionsadd.parentid" :data="treedata" :props="defaultProps" />
        </el-form-item>
        <el-form-item label="显示" prop="alwaysshow">
          <el-switch v-model="permissionsadd.alwaysshow" active-color="#13ce66" inactive-color="#ff4949" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="onSubmite('permissionsadd')">确认</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    createpermissions
  } from '@/api/permissions'
  import treeselect from '@/components/TreeSelect/TreeSelect'
  export default {
    name: 'Permissionsadd',
    components: {
      treeselect
    },
    data() {
      return {
        rules: {
          permissionscode: [{
            required: true,
            pattern: '^[A-Za-z]+$',
            message: 'cannot be blank and only letters can be entered'
          }],
          permissionsname: [{
            required: true,
            message: 'Cannot be empty '
          }],
          sort: [{
            required: true,
            message: 'Cannot be empty and must be a number'
          }]
        },
        dialogFormVisible: false,
        permissionsadd: {
          permissionscode: '',
          permissionsname: '',
          description: '',
          icon: '',
          alwaysshow: true,
          component: '@/views/',
          sort: 0,
          parentid: null
        },
        treedata: [],
        defaultProps: {
          id: 'id',
          children: 'children', // 代表children为子级
          label: 'permissionsname' // 根据name渲染tree列表
        }
      }
    },
    created() {},
    methods: {
      oncalltree(obj) {},
      onshow(obj) {
        this.treedata = obj
        this.dialogFormVisible = true
      },
      closereg() {
        this.dialogFormVisible = false
        this.clear()
      },
      clear() {
        this.$refs['permissionsadd'].resetFields()
      },
      onSubmite(formData) {
        this.$refs[formData].validate(async (valid) => {
          if (valid) {
            var res = await createpermissions(this.permissionsadd)
            if (res.code === 200) {
              this.$emit('callAdd')
              this.$message({
                message: 'Success',
                type: 'success'
              })
              this.dialogFormVisible = false
            }
          }
        })
      }
    }
  }
</script>
<style scoped>
</style>
